import 'package:flutter/material.dart';
import 'package:flutter_enjoy_plus/api/home.dart';
import 'package:flutter_html/flutter_html.dart';

class NoticeDetail extends StatefulWidget {
  const NoticeDetail({super.key});

  @override
  State<NoticeDetail> createState() => _NoticeDetailState();
}

class _NoticeDetailState extends State<NoticeDetail> {
  Map notifyDetail = {
    "id": "",
    "content": "",
    "title": "",
    "createdAt": "",
    "creatorName": ""
  };
  // 初始化工作(initState 只做初始化工作)
  @override
  void initState() {
    super.initState();
  }

  // 比如 想获取上一个页面的路由传参 - didChangeDependencies
  // 如果依赖的数据发生的变化，比如某些主题或者路由传参，统一在该函数中获取
  @override
  void didChangeDependencies() {
    // 获取公告id
    final data = ModalRoute.of(context)!.settings.arguments;
    if (data != null) {
      getAnnounceDetail((data as Map<String, dynamic>)['id']);
    }
  }

  /*
    didChangeDependencies 
    如果依赖的数据发生了变化, 比如某些主题, 或者是路由传参, 统一在该函数中获取
    关注的外部 

    didUpdateWidget
    更新组件 当父组件构建不同的widget的时候, 会触发
    关注的内部 (自身是否需要重新构建)
  */

  getAnnounceDetail(String id) async {
    final res = await getAnnounceDetailApi(id);
    setState(() {
      notifyDetail = res;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('公告详情'),
        ),
        body: ListView(children: [
          Container(
              padding: const EdgeInsets.all(10),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 标题
                    // ?? 空值合并运算符
                    // 前端 鸿蒙 flutter 都可以使用
                    // 判断 ?? 左侧的部分是否是null 或者是undefined 如果是 会执行?? 右侧
                    // flutter中没有undefined
                    Text(notifyDetail['title'] ?? '',
                        style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        )),
                    const SizedBox(height: 10),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(notifyDetail['creatorName'] ?? '',
                              style: const TextStyle(color: Colors.grey)),
                          Text(notifyDetail['createdAt'] ?? '',
                              style: const TextStyle(color: Colors.grey))
                        ]),
                    const SizedBox(height: 10),
                    // 内容
                    Html(
                      data: notifyDetail['content'] ?? "",
                    )
                  ]))
        ]));
  }
}
